<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HIS UI</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.min.css">
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>   
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script src="../jquery-tag-demo.js" type="text/javascript"></script>
</head>
<body>
    <h2>选择框，源来Bootstrap的<a href="http://www.bootcss.com/p/icheck/" target="_blank">iCheck插件</a>。</h2>
    <h3>说明:</h3>
    <span>点击勾选，常用于多项选择。</span>
    <h3>如：</h3>
    <div class="demo-exp-code entry-content"> 
        <div style="padding: 5px">
            <input class='hisui-checkbox' type="checkbox" data-options="onCheckChange:function(event,value){console.log(value)}" label="已出院" id="checkbox1"/>
            <input class='hisui-checkbox' type="checkbox" checked label="已停止"/>
            <input class='hisui-checkbox' type="checkbox" data-options="checked:true" label="已帐单"/>
            <input class='hisui-checkbox' type="checkbox" label="已就诊"/>
            <pre class="prettyprint lang-html">
<code>&lt;input class='hisui-checkbox' type="checkbox" data-options="onCheckChange:function(event,value){console.log(value)}" label="已出院" id="checkbox1"&gt;
&lt;input class='hisui-checkbox' type="checkbox" checked label="已停止"&gt;
&lt;input class='hisui-checkbox' type="checkbox" data-options="checked:true" label="已帐单"&gt;
&lt;input class='hisui-checkbox' type="checkbox" label="已就诊"&gt;
</code></pre>
        </div>
   </div>
    <div>
        <h3>复选框组件的相关配置、事件、方法</h3>
        <table class="table">
            <tr class="protitle">
                <th>属性</th>
                <th>说明</th>
                <th>默认值</th>
                <th></th>
            </tr>
            <tr>
                <td>id</td>
                <td>复选框的Id</td>
                <td>''</td>
                <td></td>
            </tr>
            <tr>
                <td>label</td>
                <td>描述</td>
                <td>''</td>
                <td></td>
            </tr>
            <tr>
                <td>disabled</td>
                <td>是否禁用。默认可用</td>
                <td>false</td>
                <td></td>
            </tr>
            <tr>
                <td>checked</td>
                <td>是否选中。默认不选中</td>
                <td>false</td>
                <td></td>
            </tr>
            <tr class="evttitle">
                <th>事件名</th>
                <th>说明</th>
                <th>入参</th>
                <th></th>
            </tr>
            <tr>
                <td>onCheckChange</td>
                <td>选中改变事件</td>
                <td>e,value</td>
                <td></td>
            </tr>
            <tr>
                <td>onChecked</td>
                <td>选中事件</td>
                <td>e,value</td>
                <td></td>
            </tr>
            <tr>
                <td>onUnchecked</td>
                <td>取消选中时触发</td>
                <td>e,value</td>
                <td></td>
            </tr>
            <tr class="mthtitle">
                <th>方法名</th>
                <th>说明</th>
                <th>入参</th>
                <th>返回值</th>
            </tr>
            <tr>
                <td>options</td>
                <td>拿到配置项对象</td>
                <td></td>
                <td>checkbox的options对象</td>
            </tr>
            <tr>
                <td>setValue</td>
                <td>选中元素</td>
                <td>true|false</td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>getValue</td>
                <td>拿到是否选中</td>
                <td></td>
                <td>true|false</td>
            </tr>
            <tr>
                <td>setDisable</td>
                <td>禁用</td>
                <td>false|true</td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>check</td>
                <td>选中</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>uncheck</td>
                <td>取消选中</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>toggle</td>
                <td>切换选中</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>disable</td>
                <td>禁用选框</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>enable</td>
                <td>启用选框</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>indeterminate</td>
                <td>设置不定选状态</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>determinate</td>
                <td>取消不定选状态</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>update</td>
                <td>重绘选框</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>destroy</td>
                <td>销毁选框</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
        </table>
    </div>
    <script>
        $(function(){
            $("#selectba").click(function(){
                $HUI.radio("#ba").setValue(true);
            });
        });
    </script>
    <prettyprint/>
</body>
</html>